<template>
	<view class="zy-column-full">
		<zy-title title='详情'></zy-title>
		
		<scroll-view class="zy-scroll" scroll-y="">
			<dynamic-item :item="entity" @comment="onComment" isCommentPage></dynamic-item>
			<!-- 评论 -->
			<comment-item :item="item" :index="index"  v-for="(item, index) in list" :key="index" @reply="onReply">
				<comment-item :item="item2" :index="index2" :isComment="false" 
				v-for="(item2, index2) in item.children" :key="index2" ></comment-item>
			</comment-item>
		</scroll-view>
		
		<view class="zy-row-center input-container">
			<input style="padding: 15rpx; color: #fff;" :placeholder="hint" 
			type="text" confirm-type="send" v-model="content" @confirm="requestSend" :focus="focus">
		</view>
		
		<quick-message ref="message"></quick-message>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				entity: {},
				list:[],
				content:'',
				parentId: "0",
				focus: false,
				hint:'说点什么吧~'
			};
		},
		onLoad() {
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.on('sendData', res => {
				this.entity = res;
				this.requestList()
			})
			
			uni.onKeyboardHeightChange(this.listenerKeyboard)
		},
		onUnload() {
			uni.offKeyboardHeightChange(this.listenerKeyboard)
		},
		methods:{
			listenerKeyboard(res){
				if(res.height == 0){
					 this.parentId = 0;
					 this.focus = false;
					 this.hint = '说点什么吧~';
				}
			},
			requestSend(){
				if(this.content == ''){
					uni.$toast.showToast('请输入评论内容')
					return
				}
				const params = {
					content:this.content,
					dynamicId:this.entity.id,
					parentId:this.parentId
				}
				uni.$http.post('/api/dynamic/sendComment', params).then(res=>{
					// uni.$toast.showToast('评论发布已提交审核，通过后会立即生效')
					this.$refs.message.show({msg: '评论发布已提交审核，通过后会立即生效'})
					this.content = ''
				})
			},
			requestList(){
				uni.$http.get('/api/dynamic/getComments', {dynamicId: this.entity.id}).then(res=>{
					this.list = res.data;
					this.list.forEach(item=>{
						item.expand = false
					})
				})
			},
			onReply(item){
				this.parentId = item.id;
				this.focus = true;
				this.hint = `回复${item.nick}`
			},
			onComment(){
				this.parentId = 0;
				this.focus = true;
				this.hint = `说点什么吧~`
			}
		}
	}
</script>

<style lang="scss">
.input-container{
	// width:100%;
	min-height: 120rpx;
	box-sizing: border-box;
	padding: 10rpx 30rpx;
	background: #151515;
	
	input{
		width: 100%;
		border: 1rpx solid rgba(#fff, 0.2);
		border-radius: 10rpx;
	}
}
</style>
